// 声明变量
$expression:"👏","🤖","🦮","🥎","🍮","🌹","😸","🐏","🏆","🎖","📯","🍐","🐱‍💻","🐉","🍊","🐠","😽","🎁","🍧","💖","🍒","🚀","💟","🐸","😍","🐴","💎","🍟","🐷","🎉","🍔","🍓","🦅","🐱‍💻","🐹","🎂","🥼","🤣","🍗","✈","🐮","🎉","💖","🥗","🥬","✨","🍕","🎈","🐒","🐸";
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #000;
}
.expression-container{
    position: absolute;
    top: 80%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%,-50%);
    list-style: none;
    &::before{
        position: absolute;
        left: 0;
        bottom: 0;
        content: "👍";
        font-size: 30px;
        background-color: rgba(255,255,255,.5);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        text-align: center;

    }
    &:active::before{
        transform: scale(1.1);
    }
}

@for $i from 1 to 51 {
    li:nth-child(#{$i}){
        position: absolute;
        top:0;
        left: 0;
        width: 50px;
        height: 50px;
        transform: rotate(#{random() * 80 - 40}deg);
        animation: move #{random() * 2500 + 1500}ms cubic-bezier(.46,.53,.51,.62) #{random() * 4000 / -1000}s infinite;
        opacity: 0;
        transition: 1.5s opacity .8s;
        &::before{
            position: absolute;
            content: nth($expression,random(length($expression)));
            font-size: 50px;
        }
    }
    li:active{
        opacity: 1;
        transition: .1s opacity;
    }
    
}

@keyframes move {
    100%{
        transform: rotate(0) translate(0,-300px);
    }
}